<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
	<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">

	<meta name="description" content=" 		Click the icon next to the Date field to display the calendar. 		We offer the following icons in the icons folder located in the themes folder. 		 			 				 					 				 				 					 				 				 					 				 				 					 				 				 					 				 				 					 				 			 		 		 		The results are inserted in the following format: 		Day of the Week, Day of the Month, Year (i.e.: 'Monday, January 1, 2007') 		The calendar appears over the dropdown list. 		The weekend days (Saturday and Sunday) are disabled. ">
	<meta name="keywords" content="dhtml tools,javascript,DHTML Tools,Javascript,ajax,AJAX,Ajax,ajax tools,AJAX Tools,tools controls,simple javascript tools">
	<title>Zapatec DHTML Calendar Widget - Single Click, Use an Icon, Disable Weekend Days</title>

	<!-- Common JS files -->
	<script type='text/javascript' src='../../utils/zapatec.js'></script>

	<!-- Custom includes -->	
		<!-- import the calendar script -->
		<script type='text/javascript' src='../../utils/zpdict.js'></script>
		<script type="text/javascript" src="../../utils/lang/zpdate-en.js"></script>
		<script type="text/javascript" src="../../utils/zpdate.js"></script>
		<script type="text/javascript" src="../src/calendar.js"></script>

		<!-- other languages might be available in the lang directory; please check
		your distribution archive. -->


	<!-- ALL demos need these css -->
	<link href="../../website/css/zpcal.css" rel="stylesheet" type="text/css">
	<link href="../../website/css/template.css" rel="stylesheet" type="text/css">
	<style type="text/css">
		body {
			width: 778px;
		}
	</style>

	<!-- Theme css -->
	<link href="../themes/fancyblue.css" rel="stylesheet" type="text/css">

	<link rel="SHORTCUT ICON" href="http://www.zapatec.com/website/main/favicon.ico">
	


</head>
<body>	<div class='zpCalSubHeader' style='text-align:center;'>Single Click, Use an Icon, Disable Weekend Days</div>

		<div class='zpCalDemoText'>
			<ul>
				<li>This demo uses the <b>fancyblue theme</b>.</li>
				
		<li>Click the icon next to the Date field to display the calendar.<br/>
		We offer the following icons in the icons folder located in the themes folder.<br/>
		<table>
			<tr>
				<td>
					<img alt='Zapatec Calendar' src='../themes/icons/calendar1.gif'>
				</td>
				<td>
					<img alt='Zapatec Calendar' src='../themes/icons/calendar2.gif'>
				</td>
				<td>
					<img alt='Zapatec Calendar' src='../themes/icons/calendar3.gif'>
				</td>
				<td>
					<img alt='Zapatec Calendar' src='../themes/icons/calendar4.gif'>
				</td>
				<td>
					<img alt='Zapatec Calendar' src='../themes/icons/calendar5.gif'>
				</td>
				<td>
					<img alt='Zapatec Calendar' src='../themes/icons/calendar6.gif'>
				</td>
			</tr>
		</table>
		</li>
		<li>The results are inserted in the following format:<br/>
		Day of the Week, Day of the Month, Year (i.e.: 'Monday, January 1, 2007')</li>
		<li>The calendar appears over the dropdown list.</li>
		<li>The weekend days (Saturday and Sunday) are disabled.</li>

			</ul>
		</div>


<b>Date:</b>
<input type="text" name="date3" id="sel3" size="30" >
<img alt="Zapatec Calendar" src="../themes/icons/calendar2.gif" border="0" id="icon3" onmouseover="this.style.cursor='pointer'" onmouseout="this.style.cursor='default'">
<br/>

<select name="license_type" style='margin-left:200px; margin-top:20px'>
	<option value="Calendar Single Server">--------------------</option>
	<option value="Calendar Domain Wide">Zapatec DHTML Calendar</option>
	<option value="Calendar Unlimited">Zapatec DHTML Tree</option>
	<option value="Calendar Library">Zapatec DHTML Menu</option>
</select>

		<script type="text/javascript">
		var cal = new Zapatec.Calendar({
		
		inputField     :    "sel3",     // id of the input field
		ifFormat       :    "%A, %B %e, %Y",     // format of the input field
		button         :    "icon3",  // trigger button (well, IMG in our case)
		dateStatusFunc :    function (date) { // disable weekend days (Saturdays == 6 and Sundays == 0)
			return (date.getDay() == 6 || date.getDay() == 0) ? true : false;},
		theme          :     "fancyblue"

		});
		
		
	</script>


	<noscript>
		<br/>
		This page uses an <a href='http://www.zapatec.com/website/main/products/suite/'>
		AJAX Component</a> - Zapatec DHTML Calendar Widget, but your browser does not support Javascript.
		<br/>
		<br/>
	</noscript>
		<br/><br/><br/>
		<div class="footer" style='width: 778px; text-align:center; margin-top:2em'>
		&copy; 2004-2009 <strong> <a href='http://www.zapatec.com/'>Zapatec, Inc.</a> </strong>
		</div>
</body>
</html>
